<template>
    <div class="class">
        <add-class ref="addClassRef"/>
        <n-button @click="disable" type="warning" :disabled="!checkedRowKeys.length">{{ isEnable ? '停用' : '启用' }}
        </n-button>
        <n-button @click="delClass" type="error" :disabled="!checkedRowKeys.length">删除</n-button>
        <n-switch :rail-style="railStyle" v-model:value="isEnable">
            <template #checked>
                查看启用
            </template>
            <template #unchecked>
                查看停用
            </template>
        </n-switch>

        <!--展示班级-->
        <n-data-table
            :columns="columns"
            :data="isEnable?useAdmin.class['enable']:useAdmin.class['disable']"
            :bordered="false"
            :max-height="'75vh'"
            :scroll-x="1800"
            :row-key="rowKey"
            :row-props="rowProps"
            :checked-row-keys="checkedRowKeys"
            @update:checked-row-keys="handleCheck"
        />
        <!--右键选项-->
        <n-dropdown
            placement="bottom-start"
            trigger="manual"
            :x="x"
            :y="y"
            :options="options"
            :show="showDropdown"
            :on-clickoutside="onClickOutside"
            @select="handleSelect"
        />
    </div>
</template>

<script setup>

import {useAdminStore} from "@/stores/admin";
import workApi from "@/http/workApi";
import {NButton} from "naive-ui";
import AddClass from "@/components/admin/新建模态框/AddClass.vue";
// 当前是否启用
let isEnable = ref(true)
let railStyle = ({focused, checked}) => {
    const style = {};
    if (checked) {
        style.background = "#2080f0";
        if (focused) {
            style.boxShadow = "0 0 0 2px #2080f040";
        }
    } else {
        style.background = "#d03050";
        if (focused) {
            style.boxShadow = "0 0 0 2px #d0305040";
        }
    }
    return style;
}
const useAdmin = useAdminStore()


// 控制展示几种内容
const columns = [
    {
        type: 'selection'
    },
    {
        title: "班级编号",
        key: "class_id"
    },
    {
        title: "班级名称",
        key: "class_name"
    },
    {
        title: "所属学院",
        key: "college"
    },
    {
        title: "指导老师",
        key: "teacher"
    },
];


// 选中班级
let checkedRowKeys = ref([])
let checkedRowKey = ref({
    id: null,
    class_id: null,
    class_name: null,
    join_school: null,
    teacher: null,
    college: null,
    profession: null,
    cp: null,
})
// 清除
const clearCheckedRowKey = () => {
    checkedRowKeys.value = []
    checkedRowKey.value.id = null
    checkedRowKey.value.class_id = null
    checkedRowKey.value.class_name = null
    checkedRowKey.value.join_school = null
    checkedRowKey.value.teacher = null
    checkedRowKey.value.college = null
    checkedRowKey.value.profession = null
    checkedRowKey.value.cp = null
}

let rowKey = (row) => row.id
let handleCheck = (rowKeys) => {
    checkedRowKeys.value = rowKeys;
}


// 停用
let disable = () => {
    dialog.warning({
        title: '警告',
        content: ('你确定吗？'),
        positiveText: '确定',
        negativeText: '不确定',
        onPositiveClick: () => {
            workApi.post('admin/class_disable', {
                ids: checkedRowKeys.value,
                disable: !isEnable.value
            }).then(() => {
                clearCheckedRowKey()
                useAdmin.setClass()
            })
        },
    })
};
// 删除班级
const dialog = useDialog()
let delClass = () => {
    dialog.warning({
        title: '警告',
        content: '你确定删除吗？',
        positiveText: '确定',
        negativeText: '不确定',
        onPositiveClick: () => {
            workApi.delete('admin/class', {
                data: {ids: checkedRowKeys.value}
            }).then(() => {
                clearCheckedRowKey()
                useAdmin.setClass()
            })
        },
    })
}

// 右键操作
// 选择器
const options = [
    {
        label: "编辑",
        key: "edit"
    },
    {
        label: () => h("span", {style: {color: "red"}}, "删除"),
        key: "delete"
    }
];
const showDropdown = ref(false)
const x = ref(0);
const y = ref(0);

const addClassRef = ref(null)
const handleSelect = (key) => {  // 点击选项
    if (key === 'edit') {
        addClassRef.value.openModifiedClass(checkedRowKey.value)
    }
    showDropdown.value = false;
}
const onClickOutside = () => {  // 点击外部
    showDropdown.value = false;
}
// 给列表添加鼠标右键事件
const rowProps = (row) => {
    return {
        onContextmenu: (e) => {
            checkedRowKey.value = row
            e.preventDefault();
            showDropdown.value = false;
            nextTick().then(() => {
                showDropdown.value = true;
                x.value = e.clientX;
                y.value = e.clientY;
            });
        }
    };
}
</script>

<style scoped lang="less">
.n-button {
    margin: 15px;
}
</style>